<!DOCTYPE html>
<html>
<head>
    <title>API测试页面</title>
</head>
<body>
<h1>MyBatis作业API测试</h1>

<h3>任务一：查询用户角色</h3>
<button onclick="testUserRoles()">测试用户admin的角色</button>

<h3>任务二：查询角色权限</h3>
<button onclick="testRoleMenus()">测试角色1的菜单</button>

<h3>任务三：综合查询</h3>
<button onclick="testUserSearch()">测试用户搜索</button>

<div id="result" style="margin-top: 20px; padding: 10px; border: 1px solid #ccc;"></div>

<script>
    function testUserRoles() {
        fetch('/mybatis-homework/api/users/username/admin')
            .then(response => response.json())
            .then(data => {
                document.getElementById('result').innerHTML =
                    '<pre>' + JSON.stringify(data, null, 2) + '</pre>';
            });
    }

    function testRoleMenus() {
        fetch('/mybatis-homework/api/roles/1')
            .then(response => response.json())
            .then(data => {
                document.getElementById('result').innerHTML =
                    '<pre>' + JSON.stringify(data, null, 2) + '</pre>';
            });
    }

    function testUserSearch() {
        fetch('/mybatis-homework/api/users/search?username=admin&page=1&pageSize=10')
            .then(response => response.json())
            .then(data => {
                document.getElementById('result').innerHTML =
                    '<pre>' + JSON.stringify(data, null, 2) + '</pre>';
            });
    }
</script>
</body>
</html>
